<script src="/res/js/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript"> 
var xset = [];//X轴数据集    
//var yset_1 = [];//Y轴数据集 1
var yset_2 = [];//Y轴数据集 2
var yset_3 = [];//Y轴数据集 2
  $(document).ready(function() {  
    $.ajax({
			type : 'get',
			url : '/wms/report/strorageNum',//请求数据的地址
			success : function(data) {						
				$.each(data, function(i, item) {					
					xset.push(item.storage_name);
					//yset_1.push(item.num/5000);	
					yset_2.push(item.kw_num*100);	
					yset_3.push(item.kr_perc*100);
				});
			}
    });
   
     setTimeout(drawchart,500);
    //setInterval(drawchart, 10000);
  });
  
function drawchart(){ 	
	//highchart绘图
    Highcharts.chart('canvas', {
    	chart: {
            zoomType: 'xy'
        },
        title: {
            text: '仓库使用情况'
        },
        subtitle: {
            text: '库位、库存占用情况统计'
        },
        xAxis:[{
            categories:xset,
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
        	labels: {
                 format: '{value}%',
                 style: {
                     color: Highcharts.getOptions().colors[1]
                 }
            },
        	title: {
                text: '使用率百分比',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
            }], 
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 5,
                verticalAlign: 'top',
                y: 5,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
        series: [{
	            name: '库存使用率',
	            type: 'column',
	            yAxis: 0,
	            data: yset_2,
	            tooltip: {
	                valueSuffix: '%'
	            }
	        },{
	            name: '库位占用率',
	            type: 'column',
	            data: yset_3,
	            tooltip: {
	                valueSuffix: '%'
	            }
	        }],
        credits: {
            enabled: false
        } 
    }); 
}
</script>
<script src="/res/js/highcharts5.05/highcharts.js"></script>
<script src="/res/js/highcharts5.05/modules/exporting.js"></script>
<div>
    <div id="canvas" style="width:100%;height:100%;"></div> 
</div> 